<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LazyEgg菜单</title>

<link href="${pageContext.request.contextPath}/css/bootstrap.min.css"
	rel="stylesheet">
<!-- 购物车 必须加  开始-->
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/shoppingCarCover.css">
<!-- 购物车 必须加 结束 -->
<link href="${pageContext.request.contextPath}/css/foot.css"
	rel="stylesheet">
<link href="${pageContext.request.contextPath}/css/head2.css"
	rel="stylesheet">
<link href="${pageContext.request.contextPath}/css/shoppingCar2.css"
	rel="stylesheet">
<link href="${pageContext.request.contextPath}/css/index2.css"
	rel="stylesheet">
<link href="${pageContext.request.contextPath}/css/menuNav.css"
	rel="stylesheet">
<link href="${pageContext.request.contextPath}/css/foodlist2.css"
	rel="stylesheet">

<script src="${pageContext.request.contextPath}/script/jquery-1.11.3.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/script/shoppingCarJs2.js?ver=1"></script>
<script type="text/javascript">
	/* 导航条 */
	$(window).scroll(function() {
		if ($(".navbar").offset().top > 50) {
			$(".navbar-fixed-top").addClass("top-nav");
		} else {
			$(".navbar-fixed-top").removeClass("top-nav");
		}
	});
	/* 购物车 开始 */
	$(function() {
		/* 内容 */
		$('[data-toggle="popover"]').popover();
		$(".ljm-update-page").on("click", function() {
			$(this).css("background-color: #cd2626;");
		})
		

	});

	/* 尺寸价格开始 */
	$(function() {
		$(".sizeItem").on("click",function() {
				$(this).siblings().css("background-color", "");
				$(this).css("background-color", "#FF8C00");
				$(this).parent().parent().next().find("span").text($(this).attr("data-ref"))
							
				$(this).parents("form").find(".selectedId").val($(this).prev().val());
	            $(this).parents("form").find(".orderNowBtn").attr("data-ref",$(this).prev().val());
		})
	})
	/* 尺寸价格结束 */
	/* 菜单分类开始 */
	$(function() {
		$(".sizeItem").on(
				"click",
				function() {
					$(this).siblings().css("background-color", "");
					$(this).css("background-color", "#FF8C00");
					$(this).parent().parent().next().find("span").text(
							$(this).attr("data-ref"))

				})
	})
	/* 菜单分类结束 */
</script>
<script type="text/javascript">
	$(function(){
		
		$(".orderNowBtn").click(function(){
			if($(this).attr("data-ref")==""){
				alert("请选择份量，谢谢！");
				return false;
			}
		});
	});
	
</script>
</head>
<body>
	<!--遮罩层 开始-->
	<c:import url="/shared/ShoppingCover.jsp" />
	<!--遮罩层 结束-->

	<div class="container">
		<!-- 回到顶部 开始-->
		<c:import url="/shared/returnTop.jsp" />
		<!--回到顶部 结束-->

		<!--导航-->
		<c:import url="/shared/header.jsp" />
		<!--导航结束-->

		<c:if test="${not empty sessionScope.user }">
			<!--购物车按钮 开始-->
			<c:import url="/shared/shoppingCarBtn.jsp" />
			<!--购物车按钮 结束-->
		</c:if>

		<!--中间部分-->
		<div class="row">
			<!--内容  小伙伴请补充-->
			<div class="col-md-10 ljm-food-list">
				<!--这里写内容-->
				<div class="row opacity">
					<c:forEach var="food" items="${requestScope.foodList }">
						<form action="ShoppingCar" method="get">
							<input type="hidden" value="foodList" name="type"/>
							<input type="hidden" class="selectedId" name="selectedId"/>
							<div class="col-sm-6 col-md-4">
								<div class="thumbnail opacity noBorder blackOpacity">
									<img src="image/foods/${food.imageFile }" alt="...">
									<div class="caption">
										<h3 style="margin-top: 20px;">${food.foodName }</h3>
										<div class="btn-toolbar">
											<div class="btn-group" style="margin-top: 20px;">
												<div class="btn btn-primary-active sizeItem">
													<span>份量</span>
												</div>
												<c:forEach var="rate" items="${requestScope.ratelist }">
													<c:if test="${food.fId==rate.food.fId }">
														<input type="hidden" value="${rate.rateId}">
														<a class="btn btn-primary sizeItem "
															data-ref="${rate.ratioPrice}"style="width: 80px;"> 
														<span>${rate.foodSize.foodSizeName}</span>
														</a>
													</c:if>
												</c:forEach>
											</div>
										</div>
										<div class="ljm-price-mark">
											￥<span class="ljm-price-num">${food.foodprice }</span>
										</div>
										<div class="popover fade left in"></div>
										<div class="foodsdetail">
											<a class="foodsdetail-a " tabindex="0" role="button"
												data-toggle="popover" data-trigger="focus"
												title="${food.foodName }"
												data-content="${food.description }"> 商品详情</a>
										</div>
										<p class="OrderBtnCenter">
												<c:choose>
													<c:when test="${not empty sessionScope.user }">
														<button class="btn btn-warning OrderBtn orderNowBtn" role="button" data-ref="" >立即下单</button>
													</c:when>
													<c:otherwise>
														<button class="btn btn-warning OrderBtn orderNowBtn" role="button" data-ref="" disabled="disabled">立即下单</button>
													</c:otherwise>
												</c:choose>
											</p>
									</div>
								</div>
							</div>
						</form>
					</c:forEach>
				</div>
				<!-- 分页 -->
				<div class="row">
					<div class="col-md-3"></div>
					<div class="col-md-6 ">
					
						<div class="ljm-page-position1">
							<form action="FoodList.html" method="get">
								<ul class="pagination ljm-page-position" style="margin: 20px;">
									 <li class="abled"><a href="FoodList.html?currentPage=${param.currentPage-1>0?param.currentPage-1:1 }&ftid=${param.ftid}" aria-label="Previous"
										class="ljm-up-page"><span aria-hidden="true">&laquo;</span></a></li>
										
										<c:forEach var="i" varStatus="status" begin="1" end="${pageNum }">
											<c:choose>
												<c:when test="${param.currentPage==i}">
													<li class="active">
														<a href="FoodList.html?currentPage=${i}&ftid=${param.ftid}">${i}</a>
													</li>
												</c:when>
												<c:otherwise>
													<li class="">
														<a href="FoodList.html?currentPage=${i}&ftid=${param.ftid}">${i}</a>
													</li>
													
												</c:otherwise>
											</c:choose>
										</c:forEach>
									<li class="abled"><a href="FoodList.html?currentPage=${param.currentPage+1>requestScope.pageNum?requestScope.pageNum:param.currentPage+1 }&ftid=${param.ftid}" 
									aria-label="Next" class="ljm-down-page"><span aria-hidden="true">»</span></a></li>
								</ul>
							</form>
						</div>
					</div>
				</div>
			</div>

			<!--内容结束-->

			<!--菜单导航 开始-->
			<c:import url="/shared/menuBar.jsp" />
			<!--菜单导航 结束-->
		</div>
		<!--中间部分结束-->

		<!--尾部-->
		<c:import url="/shared/footer.jsp" />
		<!--尾部结束-->
	</div>
</body>
</html>